<template>
  <div class="order">
    <div class="order-wrapper">
      <el-collapse v-model="activeNames" @change="handleChange">
        <collapse-item name="1" title="客户信息">
          <form-group
            :list="base"
            :options="data.option"
            :value="data.pageValue"
            label-width="150px"
            ref="base"
          />
        </collapse-item>
        <collapse-item name="3" title="联系方式">
          <form-group
            :list="data.contact"
            :options="data.option"
            :value="data.pageValue"
            label-width="150px"
            ref="contact"
          />
        </collapse-item>
        <collapse-item name="4" title="开票信息">
          <form-group
            :list="data.invoice"
            :options="data.option"
            :value="data.pageValue"
            label-width="120px"
          />
        </collapse-item>
        <collapse-item name="5" title="其他信息">
          <form-group
            :list="data.other"
            :options="data.option"
            :value="data.pageValue"
            label-width="120px"
          />
        </collapse-item>
        <collapse-item name="6" title="订单信息">
          <el-table :data="data.orderList" border style="width: 100%">
            <el-table-column
              type="index"
              label="序号"
              width="50"
              align="center"
            />
            <el-table-column prop="date" label="订单编号" align="center" />
            <el-table-column prop="name" label="物品名称" align="center" />
            <el-table-column prop="address" label="数量" align="center" />
            <el-table-column prop="address" label="单价" align="center" />
            <el-table-column prop="address" label="金额" align="center" />
            <el-table-column prop="address" label="销售人员" align="center" />
            <el-table-column prop="address" label="发票号码" align="center" />
            <el-table-column prop="address" label="购买日期" align="center" />
            <el-table-column
              prop="address"
              label="服务到期日期"
              align="center"
            />
            <el-table-column prop="address" label="合同附件" align="center" />
            <el-table-column prop="address" label="备注" align="center" />
          </el-table>
        </collapse-item>
      </el-collapse>
    </div>
  </div>
</template>

<script setup name="CustomerOrder">
import {
  fetchCityList,
  fetchRegionList,
  fetchCustomerTaxBureauList,
  fetchClassifyList,
  fetchAgencyList,
  fetchManagerList,
  fetchCustomerID,
  createCompany,
  updateCompany,
  fetchClassifyListAll
} from '@/api/order/order'
import FormGroup from '@/views/erp/orderManagement/modules/FormGroup'
import CollapseItem from '@/views/erp/orderManagement/modules/CollapseItem'
import { reactive, getCurrentInstance } from 'vue'
import { useRouter } from 'vue-router'

const router = useRouter()
const { proxy } = getCurrentInstance()
const animationDuration = 6000

const props = defineProps({
  dzjg: {
    type: Object,
    require: true
  }
})

const data = reactive({
  loading: false,
  activeNames: ['1', '2', '3'],
  base: [
    [
      {
        label: '纳税人识别号',
        id: 'ceTaxcode',
        rules: [
          { required: true, message: '请输入纳税人识别号', trigger: 'blur' }
        ]
      },
      {
        label: '企业名称',
        id: 'ceEtpname',
        rules: [{ required: true, message: '请输入企业名称', trigger: 'blur' }]
      },
      {
        label: '企业规模',
        id: 'qygm',
        rules: [{ required: true, message: '请选择企业规模', trigger: 'blur' }]
      }
    ],
    [
      {
        label: '企业性质',
        id: 'cusScaleId',
        type: 'select',
        rules: [{ required: true, message: '请选择所属地区', trigger: 'blur' }]
      },
      {
        label: '所属地区',
        id: 'citycodes',
        type: 'select',
        mapper: ['codevalue', 'codename'],
        rules: [{ required: true, message: '请选择所属地区', trigger: 'blur' }]
      },
      {
        label: '所属片区',
        id: 'region',
        type: 'select',
        mapper: ['wdbm', 'wdname'],
        rules: [{ required: true, message: '请选择所属片区', trigger: 'blur' }]
      }
    ],
    [
      {
        label: '注册资本',
        id: 'ceRegmoney',
        rules: [{ required: true, message: '请输入注册资本', trigger: 'blur' }]
      },
      {
        label: '所属税务机关',
        id: 'ceTaxbureaid',
        type: 'select',
        mapper: ['taxBureaId', 'taxBureaName'],
        rules: [
          { required: true, message: '请选择所属税务机关', trigger: 'blur' }
        ]
      },
      {
        label: '客户经理',
        id: 'khjlid',
        type: 'select',
        mapper: ['khjlId', 'khjlName'],
        rules: [{ required: true, message: '请选择客户经理', trigger: 'blur' }]
      }
    ],
    [
      {
        label: '客户类别',
        id: 'custype',
        type: 'select',
        span: 8,
        rules: [{ required: true, message: '请选择客户类别', trigger: 'blur' }]
      },
      {
        label: '客户分类',
        id: 'classify',
        type: 'cascader',
        span: 8,
        rules: [{ required: true, message: '请选择客户分类', trigger: 'blur' }]
      }
    ]
  ],
  contact: [
    [
      {
        label: '企业联系人1',
        id: 'ceContactname',
        rules: [
          { required: true, message: '请输入联系人名称', trigger: 'blur' }
        ]
      },
      {
        label: '联系人职务',
        id: 'linkwork',
        rules: [
          { required: true, message: '请输入联系人职务', trigger: 'blur' }
        ]
      },
      {
        label: '企业联系人2',
        id: 'ceContactname2',
        rules: [
          { required: true, message: '请输入联系人名称', trigger: 'blur' }
        ]
      }
    ],
    [
      {
        label: '联系电话1',
        id: 'ceContactmobile1',
        rules: [
          { required: true, message: '请输入联系电话', trigger: 'blur' },
          { min: 11, max: 11, message: '长度在11个字符', trigger: 'blur' }
        ]
      },
      {
        label: '联系电话2',
        id: 'ceContactmobile2',
        rules: [
          { required: true, message: '请输入联系电话', trigger: 'blur' },
          { min: 11, max: 11, message: '长度在11个字符', trigger: 'blur' }
        ]
      },
      {
        label: '联系电话3',
        id: 'ceContactmobile3',
        rules: [
          { required: true, message: '请输入联系电话', trigger: 'blur' },
          { min: 11, max: 11, message: '长度在11个字符', trigger: 'blur' }
        ]
      }
    ],
    [
      {
        label: '银行名称',
        id: 'ceCreatebank',
        rules: [{ required: true, message: '请输入银行名称', trigger: 'blur' }]
      },
      {
        label: '银行账号',
        id: 'ceBankaccount',
        rules: [{ required: true, message: '请输入银行账号', trigger: 'blur' }]
      },
      {
        label: '企业等级',
        id: 'xj',
        type: 'select',
        rules: [{ required: true, message: '请选择企业等级', trigger: 'blur' }]
      }
    ],
    [
      {
        label: '企业地址',
        id: 'ceOfficeaddr',
        span: 8,
        rules: [{ required: true, message: '请输入企业地址', trigger: 'blur' }]
      },
      {
        label: '所属代账公司',
        id: 'dzjgId',
        type: 'select',
        span: 8,
        rules: [
          { required: true, message: '请选择所属代账公司', trigger: 'blur' }
        ]
      }
    ]
  ],
  invoice: [
    [
      { label: '开票客户名称', id: 'kpkhmc' },
      { label: '发票类型', id: 'fplx', type: 'select' },
      { label: '发票邮箱', id: 'fpyx' },
      { label: '销售人员', id: 'xsry', type: 'select' }
    ]
  ],
  other: [
    [
      { label: '所属业务板块', id: 'ssywbk', type: 'select' },
      { label: '业务流程', id: 'ywlc', type: 'select' },
      { label: '收款方式', id: 'skfs', type: 'select' },
      { label: '销售类型', id: 'sslx', type: 'select' }
    ],
    [
      { label: '仓库', id: 'ck', type: 'select' },
      { label: '开票点', id: 'ckd', type: 'select' },
      { label: '提货点', id: 'thd', type: 'select' },
      { label: '购买日期', id: 'gmrq', type: 'select' }
    ],
    [{ label: '合同', id: 'ht', span: 6 }]
  ],

  pageValue: {
    ceBankaccount: null,
    ceContactmobile1: null,
    ceContactmobile2: null,
    ceContactmobile3: null,
    ceContactname: null,
    ceContactname2: null,
    ceCreatebank: null,
    ceEtpname: null,
    ceOfficeaddr: null,
    ceRegmoney: null,
    ceTaxbureaid: null,
    ceTaxcode: null,
    citycodes: null,
    cusClassifyOne: null,
    cusClassifyThree: null,
    cusClassifyTwo: null,
    // cusId: 0,
    cusScaleId: null,
    cuslevel: null,
    custype: null,
    dzjgId: data.dzjg.cusId,
    dzjgName: null,
    frje: null,
    htxy: null,
    khjlid: null,
    khjlname: null,
    linkwork: null,
    orgid: null,
    qyxx: null,
    region: null,
    remark: null,
    spsj: null,
    spzp: null,
    sqje: null,
    sqm: null,
    xj: null,
    spdqsj: null,
    qygm: null,
    classify: null
  },

  option: {
    cusScaleId: [
      { label: '一般纳税人', value: '0' },
      { label: '小规模纳税人', value: '1' },
      { label: '点下户', value: '2' },
      { label: '非纳税人', value: '3' }
    ],
    custype: [
      { label: '一般产品客户', value: '0' },
      { label: '重点客户', value: '2' }
    ],
    xj: [
      { label: '一星', value: '1' },
      { label: '二星', value: '2' },
      { label: '三星', value: '3' },
      { label: '四星', value: '4' },
      { label: '五星', value: '5' }
    ],
    cuslevel: [
      { label: '一星', value: '1' },
      { label: '二星', value: '2' },
      { label: '三星', value: '3' },
      { label: '四星', value: '4' },
      { label: '五星', value: '5' }
    ],
    khjlid: [],
    dzjgId: [{ label: data.dzjg.ceEtpname, value: data.dzjg.cusId }],
    ceTaxbureaid: [],
    citycodes: [],
    region: [],
    classify: []
  },

  orderList: [],
  total: 0,
  queryParams: {
    pageNum: 1,
    pageSize: 10
  }
})

init()
async function init() {
  await fetchManager()
  // await fetchAgency()
  await fetchClassify()
  await fetchTaxBureau()
  await fetchRegion()
  await fetchCity()
}

async function fetchManager() {
  const res = await fetchManagerList()
  if (res.code === 200) {
    data.option.khjlid = res.data.map(item => ({
      ...item,
      khjlName: `${item.khjlName} (${item.khjlId})`
    }))
  } else {
    proxy.$modal.msgError('获取客户经理列表失败')
  }
}
async function fetchAgency() {
  const res = await fetchAgencyList()
  if (res.code === 200) {
    data.option.dzjgid = res.data
  } else {
    proxy.$modal.msgError('获取代账机构列表失败')
  }
}
async function fetchClassify() {
  const res = await fetchClassifyListAll()
  if (res.code === 200) {
    data.option.classify = toTree(res.data)
  } else {
    proxy.$modal.msgError('获取客户分类列表失败')
  }
}
function toTree(val) {
  let result = []
  if (!Array.isArray(val)) {
    return result
  }
  val.forEach(item => {
    delete item.children
  })
  let map = {}
  val.forEach(item => {
    map[item.id] = item
  })
  val.forEach(item => {
    let parent = map[item.parentid]
    if (parent) {
      ;(parent.children || (parent.children = [])).push(item)
    } else {
      result.push(item)
    }
  })
  return result
}
async function fetchTaxBureau() {
  const res = await fetchCustomerTaxBureauList()
  if (res.code === 200) {
    data.option.ceTaxbureaid = res.data
  } else {
    proxy.$modal.msgError('获取税局列表失败')
  }
}
async function fetchRegion() {
  const res = await fetchRegionList()
  if (res.code === 200) {
    data.option.region = res.data
    console.log(res.data)
  } else {
    proxy.$modal.msgError('获取区域列表失败')
  }
}
async function fetchCity() {
  const res = await fetchCityList()
  if (res.code === 200) {
    data.option.citycodes = res.data
  } else {
    proxy.$modal.msgError('获取城市列表失败')
  }
}

function handleBack() {
  router.push({ path: '/xs/khda', query: {} })
}
function pagination() {}
async function handleSubmit() {
  let baseValid = true,
    contactValid = true,
    agencyValid = true
  if (data.pageValue.custype === '2') {
    proxy.$refs.agency.$refs.form.validate(valid => {
      if (!valid) {
        agencyValid = false
      }
    })
  }
  proxy.$refs.base.$refs.form.validate(valid => {
    if (!valid) {
      baseValid = false
    }
  })
  proxy.$refs.contact.$refs.form.validate(valid => {
    if (!valid) {
      contactValid = false
    }
  })

  if (baseValid && contactValid && agencyValid) {
    console.log('通过')
    const dataValue = data.pageValue
    dataValue.cusClassifyOne = dataValue.classify[0]
      ? dataValue.classify[0].code
      : null
    dataValue.cusClassifyTwo = dataValue.classify[1]
      ? dataValue.classify[1].code
      : null
    dataValue.cusClassifyThree = dataValue.classify[2]
      ? dataValue.classify[2].code
      : null
    dataValue.xj = dataValue.cuslevel
    data.loading = true
    try {
      const res = await createCompany(dataValue)
      if (res.code === 200) {
        proxy.$modal.msgSuccess('新增客户销售订单成功')
      } else {
        proxy.$modal.msgError(res.msg)
      }
      data.loading = false
    } catch (e) {
      console.log(e)
      proxy.$modal.msgError('新增订单服务异常 请重试')
      data.loading = false
    }
  }
}
</script>

<style scoped lang="scss">
.order {
  //min-height: calc(100vh - 89px);
  //height: calc(100vh - 89px);

  .order-wrapper {
    //height: 100%;
    padding: 0 10px;
    //overflow-y: scroll;
  }
}

.el-collapse {
  margin-bottom: 40px;
}

.collapse-title {
  font-weight: 600;
}

.block {
  width: 3px;
  display: inline-block;
  height: 16px;
  background-color: rgb(62, 146, 255);
  margin-right: 8px;
}

.col .item {
  //border: 1px solid lightgray;
  height: 36px;
  margin-bottom: 20px;
  //border-right: none;
  //border-bottom: none;
}

.collapse .row:last-child {
  margin-bottom: 10px;
}

.item-label,
.item-value {
  text-align: center;
  font-size: 12px;
  line-height: 30px;
}

.item-label {
  text-align: right;
  line-height: 36px;
  margin-right: 15px;
}
</style>
